<script setup lang="ts">
import mortarboardIcon from '@/assets/svg/mortarboard_icon.svg?component'
import ImageViewer from '@/components/ImageViewer/ImageViewer.vue';
import { useRoute } from "vue-router";
import { useNav } from "@/layout/hooks/useNav";
import { computed, onMounted } from "vue";
import UserCard from './components/UserCard.vue'
import GoldAcquire from './components/GoldAcquire.vue'
import InviteFriend from './components/InviteFriend.vue'
import ContactUs from './components/ContactUs.vue'
import SignInCalendar from './components/SignInCalendar.vue'
import { View } from '@element-plus/icons-vue'

defineOptions({
  name: "EmployCenter"
});
// 在 setup 中获取当前路由
const route = useRoute();

// 示例数据
const cardList = [
  {
    id: "1898002048380628993",
    img: "https://www.zhanshi123.me/wp-content/uploads/2025/02/word表格制作海报.jpg",
    title: "万能Word表格生成(测试用例)",
    tags: ["最爱","计算机"],
    button: "立即体验"
  },
  {
    id: "1901662627037245441",
    img: "https://www.zhanshi123.me/wp-content/uploads/2025/01/智能生成用例说明生成结果.png",
    title: "用例说明文档",
    tags: ["最爱"],
    button: "立即体验"
  },
  {
    id: "1915419574588731393",
    img: "https://www.zhanshi123.me/wp-content/uploads/2025/04/QQ20250423-003744.png",
    title: "论文降重",
    tags: ["最爱","计算机"],
    button: "立即体验"
  },
  {
    id: "1915425971179155457",
    img: "https://www.zhanshi123.me/wp-content/uploads/2025/04/降aigc1.png",
    title: "降AIGC",
    tags: ["最爱"],
    button: "立即体验"
  },
  {
    id: "1922686038261690370",
    img: "https://www.zhanshi123.me/wp-content/uploads/2025/05/功能测试文档-海报1.jpg",
    title: "系统功能测试文档",
    tags: ["最爱","计算机"],
    button: "立即体验"
  }
];

onMounted(() => {
  console.log("当前路由路径:", route.path);
});
</script>

<template>
  <div class="employ-center">
    <!-- 标题区域 -->
    <div class="title-area">
      <component :is="mortarboardIcon" class="title-icon" />
      <div class="title-text">
        <h1>校园小助手</h1>
        <p>一站式解决你的学习需求</p>
      </div>
    </div>
    <!-- 主体区域：左右两栏 -->
    <div class="content-wrapper">
      <!-- 左侧卡片区 -->
      <div class="left-content">
        <div class="card-list">
          <div v-for="(card, index) in cardList" :key="index" class="card">
            <div class="image-container group bg-gray-50 overflow-hidden relative">
              <el-image
                :src="card.img"
                fit="cover"
                class="card-img w-full h-full cursor-pointer transition-transform duration-300 group-hover:scale-110"
                :preview-src-list="[card.img]"
                :initial-index="0"
                preview-teleported
                :hide-on-click-modal="true"
                :z-index="3000"
                style="width: 100%; height: 150px; object-fit: cover;"
              />
              <!-- 悬浮遮罩层 -->
              <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-40 transition-all duration-300 flex items-center justify-center pointer-events-none">
                <el-icon :size="32" color="white" class="opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                  <View />
                </el-icon>
              </div>
            </div>
            <h3 class="card-title">{{ card.title }}</h3>
            <div class="card-tags">
              <span v-for="(tag, i) in card.tags" :key="i" class="tag" :class="`tag-${i % 3}`">{{ tag }}</span>
            </div>
            <button class="card-button">{{ card.button }}</button>
          </div>
        </div>
      </div>
      <!-- 右侧功能区 -->
      <aside class="right-sidebar">
        <div class="sidebar-card"><UserCard /></div>
        <div class="sidebar-card"><GoldAcquire /></div>
        <div class="sidebar-card"><InviteFriend /></div>
        <div class="sidebar-card"><ContactUs /></div>
        <div class="sidebar-card"><SignInCalendar /></div>
      </aside>
    </div>
  </div>
</template>

<style scoped>
.employ-center {
  max-width: 1500px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}
.title-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32px;
}
.title-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}
.title-text h1 {
  font-size: 2rem;
  font-weight: bold;
  margin: 0;
}
.title-text p {
  color: #666;
  font-size: 1.1rem;
  margin: 8px 0 0 0;
}
.content-wrapper {
  display: flex;
  gap: 36px;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}
.left-content {
  flex: 1 1 0%;
  min-width: 0;
}
.right-sidebar {
  width: 380px;
  min-width: 260px;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
}
.sidebar-card {
  background: #fff;
  border: 1px solid #e5e6eb;
  border-radius: 12px;
  box-shadow: 0 4px 16px 0 rgba(0,0,0,0.07);
  padding: 22px 20px 18px 20px;
  transition: box-shadow 0.2s;
}
.sidebar-card:hover {
  box-shadow: 0 8px 24px 0 rgba(41,98,255,0.13);
}
.card-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(250px, 1fr));
  gap: 24px;
  justify-content: center;
}
@media (max-width: 1400px) {
  .card-list {
    grid-template-columns: repeat(3, minmax(250px, 1fr));
  }
  .right-sidebar {
    width: 300px;
  }
}
@media (max-width: 1100px) {
  .card-list {
    grid-template-columns: repeat(2, minmax(250px, 1fr));
  }
  .right-sidebar {
    width: 100%;
    min-width: 0;
    margin-top: 32px;
  }
  .content-wrapper {
    flex-direction: column;
    align-items: stretch;
  }
}
@media (max-width: 700px) {
  .card-list {
    grid-template-columns: 1fr;
  }
}
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: #fff;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.06);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px 0 rgba(41,98,255,0.10);
}
.image-container {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  margin: -20px -20px 0 -20px;
}
.card-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  cursor: pointer;
}
.image-container:hover .card-img {
  transform: scale(1.1);
}
.image-container:hover .image-overlay {
  opacity: 1;
}
.card-title {
  font-size: 1.1rem;
  margin: 0;
  font-weight: 600;
}
.card-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 500;
}
.tag-0 {
  background-color: #fce8e6;
  color: #c0362c;
}
.tag-1 {
  background-color: #e8f0fe;
  color: #1a73e8;
}
.tag-2 {
  background-color: #e6f4ea;
  color: #188038;
}
.card-button {
  width: 100%;
  padding: 8px 20px;
  background-color: #2979ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: auto;
}
.card-button:hover {
  background-color: #66b1ff;
}
body, html, .employ-center {
  overflow-x: hidden;
}
</style>
